<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="div1">
    <div>取消兄弟组件之间数据传递：<button @click='handle'>取消绑定事件</button></div>
    <component1></component1>
    <component2></component2>
  </div>
  
  <script type="text/javascript">
  /* 
    需求：通过点击组件1的按钮修改组件2的数据和通过点击组件2的按钮修改组件1的数据
   */

    // 第一步：提供事件中心来管理所有组件的事件。
    const component_center = new Vue();
    
    //组件1
    Vue.component('component1', {
      data: function() {
        return {
          value1: 0
        }
      },
      template: `
        <div>
          component1初始值：{{value1}}
            <button @click='handle'>组件1的按钮</button>
        </div>
      `,
      methods: {
        handle: function() {
          // 调用component_center监听的exe_component2该事件。
          component_center.$emit("exe_component2",100);   /*通过component_center发出一个名为exe_component2的事件，并传递一个值100*/
        }
      },
      mounted: function() {
        // 监听事件
        component_center.$on("exe_component1",(value) => {   /*$on 是一个实例方法，用于监听自定义事件。当这些事件在 Vue 实例上被触发时，通过 $on 注册的回调函数将被执行。*/
          this.value1 += value;
        });
      }
    });
    
    //组件2
    Vue.component('component2', {
      data: function() {
        return {
          value2: 0
        }
      },
      template: `
        <div>
          component2初始值：{{value2}}
            <button @click='handle'>组件2的按钮</button>
        </div>
      `,
      methods: {
        handle: function() {
          // 调用component_center监听的exe_component2该事件。
          component_center.$emit("exe_component1",1);
        }
      },
      mounted: function() {
        // 监听事件
        component_center.$on("exe_component2",(value) => {
          this.value2 += value;
        });
      }
    });

    const vm = new Vue({
      el: '#div1',
      data: {

      },
      methods: {
        handle: function() {
          component_center.$off("exe_component1");
          component_center.$off("exe_component2");
        }
      }
    });
  </script>
</body>
</html>
